<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="_meta :: header">
    <title>预览</title>
    <script charset="utf-8" src="<%=basePath%>/plug-in/ueditor143/ueditor.config.js"></script>
    <script charset="utf-8" src="<%=basePath%>/plug-in/ueditor143/ueditor.all.js"></script>
    <script type="text/javascript" src="<%=basePath%>/plug-in/jquery/jquery-1.12.2.min.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form form form-horizontal" id="form-video-edit" action="#"
              th:action="@{/admin/draft/sevenVideo}"  enctype="multipart/form-data">
            <input name="draftText" value="" id="draftText" type="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label"><span
                        class="c-red">*</span>稿件标题：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input"  name="draftTitle"
                           placeholder="稿件标题" id="draftTitle" style="width:400px;"/>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span
                        class="c-red">*</span>文件名：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="fileName"
                           placeholder="文件名" id="fileName" style="width:400px;"/>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">查看视频：</label>
                <div class="imgcon" style="float:left;">
                </div>
                <div class="addimg" style="float: left ;">
                    <div id="drag" class="" title="将文件拖拽到此处上传">
                        <label title="点击预览">
                            <video th:src="${draft?.draftText}" id="videoUrlId" controls="controls" preload="preload"
                                   style="height: 200px;width: 300px;" alt=""></video>
                        </label>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" ><span
                        class="c-red">*</span>上传视频：</label>
                <div class="layui-input-inline">
                    <div style="display:inline" >
                        <label th:for="${'fileupload'}" title="点击上传">
                            <a title="上传" class="layui-btn" style="text-decoration:none">上传</a>
                        </label>
                        <!--                                上传录屏-->
                        <input   th:id="${'fileupload'}" style="display: none" class="fileupload" type="file"  name="file"
                                multiple="multiple"  accept="video/*"  data-url="/admin/draft/uploadAudioVideo">
                    </div>
                </div>
            </div>
            <button  title="发布"  onclick="reales()" type="submit"
               class="layui-btn"  style="text-decoration:none">发布</button>


        </form>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<div th:replace="_footer :: footerjs"></div>
<div th:replace="_ueditor :: ueditor"></div>
<link rel="stylesheet" type="text/css" th:href="@{/xadmin/lib/formSelect/formSelects-v4.css}"/>
<script type="text/javascript" th:src="@{/xadmin/lib/formselect/formSelects-v4.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/vendor/jquery.ui.widget.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.iframe-transport.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.fileupload.js}"></script>


<!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->

<!--/请在上方写此页面业务相关的脚本-->
<script>

    function reales() {
        var draftText = $('#videoUrlId').attr('src');
        $('#draftText').val(draftText);
    }
    $(function(){
        $("#form-video-edit").validate({
            rules:{
                draftTitle:{
                    required: true,
                },
                draftText:{
                    required: true,
                },
                fileName:{
                    required:true,
                },
            },
            onkeyup:false,
            debug: true,
            success:"valid",
            submitHandler:function(form) {
                if($('#videoUrlId').attr('src') == ""){
                    selfmsg("请上传视频")
                    return false;
                }
                $(form).ajaxSubmit({
                    type: 'post',
                    url: '/admin/draft/reales',
                    cache: false,
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "1") {
                            selfmsg('发布成功!', 1, function () {
                                window.location.reload();
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                parent.layer.close(index);
                                $.unlock()
                            });
                        } else {
                            selfmsg('发布失败!');
                            $.unlock()
                        }
                    },
                    error: function () {
                        selfmsg('发布异常!', 5);
                        $.unlock()
                    }
                });
            }

        });
    });
</script>
<script>

    //删除图片
    function closeImg(obj) {
        $(obj).parent().remove();
        // var goods_img = '';
        // $('.imgcon .img_div').each(function () {
        //     goods_img += $(this).find('img').attr('src') + ',';
        // })
        $('.meetingIcon').val('');
        if ($('.imgcon').children().length == 1) {
            $('.addimg').css('display', 'none');
        }
        if ($('.imgcon').children().length < 1) {
            $('.addimg').css('display', 'inline-block');
        }
    }

    //上传图片
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            dropZone: $('#drag'),
            change: function (e, data) {
                var len = $('.imgcon').children().length;
                if (data.files.length > (1 - parseInt(len))) {
                    layer.msg('最多上传1张图片');
                    return false;
                }
            },
            start: function (e) {
                layer_msg = layer.msg('上传中…', {time: 100000000});
            },
            progressall: function (e, data) {
                console.log(data)
                // $('.layui-layer-msg .layui-layer-content').html('已上传' + (data.loaded / data.total * 100).toFixed(2) + '%');
                $('.layui-layer-msg .layui-layer-content').html('上传中......');
            },
            done: function (e, data) {
                console.log(data)
                $('#videoUrlId').attr("src",data.result.msg);
                layer.close(layer_msg);
            }
        });
        $('#drag').bind('drop dragover', function (e) {
            e.preventDefault();
        }).on('dragenter', function (e) {
            $(this).addClass('dragenter');
        }).on('drop', function (e) {
            $(this).removeClass('dragenter');
        }).on('dragleave', function (e) {
            $(this).removeClass('dragenter');
        });

        //图片回显
        if ("$document.getElementsByName('name')" != '') {
            var goods_img = $(document.getElementsByName('name'));
            $('.goods_img').val(goods_img);
            // var arr = goods_img.split(',');
            // for (var i = 0; i < arr.length; i++) {
            //     if (arr[i] != '') {
            //         callback(arr[i]);
            //     }
            // }
            if ($('.imgcon').children().length == 1) {
                $('.addimg').css('display', 'none');
            }

        }
    });
</script>
</body>
</html>